<template>
	<div class="AddDialog">
		<el-dialog :close-on-click-modal="closeOnClickModal" :title="title" v-model="visible" width="600px" @open="open" @closed="dialogClosed">
			<div class="form_wrap">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px">
					<el-form-item prop="parentId" label="父级分类">
						<el-cascader
							v-model="ruleForm.parentId"
							:options="options"
							:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
							:show-all-levels="false"
							filterable
							placeholder="搜索分类"
						></el-cascader>
					</el-form-item>
					<el-form-item prop="name" label="分类名称">
						<el-input show-word-limit maxlength="200" v-model="ruleForm.name" placeholder="请输入分类名称"></el-input>
					</el-form-item>
					<el-form-item prop="categoryDesc" label="分类描述">
						<el-input show-word-limit maxlength="400" v-model="ruleForm.categoryDesc" :rows="3" type="textarea" placeholder="请输入分类描述" />
					</el-form-item>
					<el-form-item prop="score" label="分类排序">
						<el-input-number v-model="ruleForm.score" label="请输入数字，越大越排前"></el-input-number>
					</el-form-item>
					<el-form-item label="是否启用">
						<MySwitch v-model="ruleForm.showStatus" />
					</el-form-item>
					<el-form-item prop="icon" label="分类图片">
						<span @click="selectPic" style="cursor: pointer">
							<Img :src="ruleForm.icon" width="100px" height="100px" />
						</span>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" :loading="btnLoading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>
<script>
import dialog from '/@/mixins/dialog';
import { ElMessage } from 'element-plus';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { rules, usePic } from './hook';
import { useProductApi } from '/@/api/product';

const { addCate, editCate, getCateList } = useProductApi();

export default {
	name: 'AddDialog',
	mixins: [dialog],
	emits: ['update:modelValue', 'refresh'],
	components: { PictureSelectorDialog },
	props: {
		isAdd: {
			type: Boolean,
			default: false,
		},
		cateType: {
			type: Number,
			default: 1,
		},
		itemInfo: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props, { emit }) {
		const loading = ref(false);
		const ruleForm = ref({
			score: 0,
		});
		const options = ref([]);
		const init = async () => {
			let res = await getCateList(-1, props.cateType);
			if (res.code !== 200) return;
			options.value = [{ id: 0, name: '根目录', children: res.data }];
		};
		const open = () => {
			if (props.isAdd) {
				ruleForm.value.type = props.cateType;
			} else {
				ruleForm.value = { ...props.itemInfo };
			}
			init();
		};
		const dialogClosed = () => {
			ruleForm.value = { score: 0 };
			formRef.value.resetFields();
		};
		const formRef = ref();
		const btnLoading = ref(false);
		const toSave = () => {
			try {
				formRef.value.validate(async (valid) => {
					if (!valid) return;
					if (ruleForm.value.children) delete ruleForm.value.children;
					btnLoading.value = true;
					let res = props.isAdd ? await addCate(ruleForm.value) : await editCate(ruleForm.value);
					btnLoading.value = false;
					if (res.code !== 200) return;
					emit('update:modelValue', false);
					ElMessage.success('保存成功！');
					emit('refresh');
				});
			} catch (error) {
				btnLoading.value = false;
			}
		};
		return {
			title: computed(() => (props.isAdd ? '新增' : '修改') + '分类'),
			ruleForm,
			rules,
			options,
			loading,
			init,
			open,
			dialogClosed,
			formRef,
			toSave,
			btnLoading,
			...usePic(ruleForm),
		};
	},
};
</script>

<style lang="scss" scoped>
.AddDialog {
}
</style>
